<!--
 * @Description: 弹出框组件
-->
<template>
  <el-dialog
    v-if="show"
    :custom-class="`_ehl_dialog ${customClass}`"
    :title="title"
    :visible.sync="show"
    :close-on-click-modal="false"
    :show-close="false"
    append-to-body
  >
    <i class="_ehl_dialog_close el-icon-close" @click="$emit('cancel')"></i>
    <div class="_ehl_dialog_content"><slot></slot></div>
    <div v-if="showBtn" class="_ehl_dialog_button">
      <slot name="operate">
        <div class="_ehl_dialog_btn cpt_btn_white cpt_margin_10" @click="$emit('cancel')"
          >{{ cancelTxt }}
        </div>
        <div class="_ehl_dialog_btn cpt_btn_blue" @click="$emit('commit')">
          {{ commitTxt }}
        </div>
      </slot>
    </div>
  </el-dialog>
</template>
<script>
  /**
   * customClass 自定义窗口的样式
   * title 标题
   * show 开关按钮
   * cancelTxt 默认的取消文字
   * cancelTxt 默认的确定文字
   * 插槽【button】如果不写则使用默认的按钮，分为取消和确定，需要绑定cancel和commit事件
   */
  import Vue from 'vue'
  import { Dialog } from 'element-ui'
  Vue.use(Dialog)
  export default {
    props: {
      customClass: { type: String, default: () => '' },
      title: { type: String, default: () => '标题' },
      show: { type: Boolean, default: () => false },
      showBtn: { type: Boolean, default: () => true },
      cancelTxt: { type: String, default: () => '取消' },
      commitTxt: { type: String, default: () => '确定' },
    },
  }
</script>
